<template>
	<view>
		<view class="background"></view>
		<navView navTitle="项目列表" backgroundColor="#008efe" titleColor="#fff" :isBack="true"></navView>
		<view class="project-box">
			<view class="project-list2">
				<view class="project-card" v-for="(project, index) in projects" :key="index">
					<!-- 项目名称和状态 -->
					<view class="project-header">
						<text>{{ project.name }}</text>
						<text
							:class="['status-tag', project.contract_status == 0 ? 'completed' : project.contract_status == 1 ? 'ongoing' : project.contract_status == 2 ? 'not-started' : '']">
							{{ project.contract_status == 0 ? '未开始' : project.contract_status == 1 ? '进行中' :
								project.contract_status == 2 ? '已完成' : '' }}
						</text>
					</view>
					<!-- 负责人信息 -->
					<view class="project-detail">
						<view class="userbox" @tap="togglePhone('sale', index)">
							<view class="text">销售：{{ project.sale.name }}</view>
							<!-- 电话号码 -->
							<view class="phone-wrapper" v-if="showSalePhone[index]">
								<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png" mode="">
								</image>
								<text>{{ project.sale.mobile }}</text>
							</view>
						</view>
						<view class="userbox" @tap="togglePhone('technology', index)">
							<view class="text">技术：{{ project.technology.name }}</view>
							<!-- 电话号码 -->
							<view class="phone-wrapper" v-if="showTechnologyPhone[index]">
								<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png" mode="">
								</image>
								<text>{{ project.technology.mobile }}</text>
							</view>
						</view>
						<view class="userbox" @tap="togglePhone('finance', index)">
							<view class="text">财务：{{ project.finance.name }}</view>
							<!-- 电话号码 -->
							<view class="phone-wrapper" v-if="showFinancePhone[index]">
								<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png" mode="">
								</image>
								<text>{{ project.finance.mobile }}</text>
							</view>
						</view>
						<view class="userbox" @tap="togglePhone('executive', index)">
							<view class="text">行政：{{ project.executive.name }}</view>
							<!-- 电话号码 -->
							<view class="phone-wrapper" v-if="showExecutivePhone[index]">
								<image class="image" src="https://hfd.bjlzkj.com/static/list/phone-icon.png" mode="">
								</image>
								<text>{{ project.executive.mobile }}</text>
							</view>
						</view>
					</view>
					<!-- 功能标签栏 -->
					<view class="tab-bar">
						<text class="tab-item" @tap="$navTo('/subpkg/contract/contractDetail/contractDetail?id=' + project.id)">合同详情</text>
						<text class="tab-item" @tap="$navTo('/subpkg/contract/contractStateAdd/contractStateAdd?id=' + project.id)">项目管理</text>
						<text class="tab-item" @tap="$navTo('/subpkg/contract/pay/pay?id=' + project.id)">合同付款</text>
						<text class="tab-item" @tap="$navTo('/subpkg/contract/contractOrder/contractOrder?id=' + project.id)">开票情况</text>
					</view>
				</view>
			</view>
			<view v-if="isLoading" class="loading-text">加载中...</view>
			<view v-if="isNoMore && projects.length > 0" class="no-more-text">已经到底啦~</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			projects: [], // 清空初始测试数据			
			showSalePhone: [],
			showTechnologyPhone: [],
			showFinancePhone: [],
			showExecutivePhone: [],
			// 新增分页相关状态
			currentPage: 1,
			totalPages: 1,
			isLoading: false,
			isNoMore: false,
		}
	},
	mounted() {
		this.projects.forEach(() => {
			this.showSalePhone.push(false);
			this.showTechnologyPhone.push(false);
			this.showFinancePhone.push(false);
			this.showExecutivePhone.push(false);
		});
	},
	onLoad() {
		this.getProjectList()
	},
	// 新增滚动到底部监听
	onReachBottom() {
		if (!this.isNoMore) {
			this.getProjectList();
		}
	},
	methods: {
		getProjectList() {
			console.log('触发加载，当前页码:', this.currentPage, '是否加载中:', this.isLoading, '是否无更多:', this.isNoMore);
			// 加载状态控制
			if (this.isLoading || this.isNoMore) return;
			this.isLoading = true;
			uni.showLoading({ title: '加载中', mask: true });

			this.$request('/addons/qingdong/project/getSelectList', 'GET', {
				page: this.currentPage,  // 添加分页参数
				per_page: 10             // 每页数量
			}).then(res => {
				const response = res.data;
				if (response.data && response.data.length > 0) {
					// 首屏加载替换数据，翻页加载拼接数据
					this.projects = this.currentPage === 1
						? response.data
						: [...this.projects, ...response.data];

					// 初始化/扩展联系电话显示状态数组
					if (this.currentPage === 1) {
						this.showSalePhone = response.data.map(() => false);
						this.showTechnologyPhone = response.data.map(() => false);
						this.showFinancePhone = response.data.map(() => false);
						this.showExecutivePhone = response.data.map(() => false);
					} else {
						response.data.forEach(() => {
							this.showSalePhone.push(false);
							this.showTechnologyPhone.push(false);
							this.showFinancePhone.push(false);
							this.showExecutivePhone.push(false);
						});
					}

					// 更新分页状态
					this.totalPages = response.last_page || 1;  // 根据接口实际返回字段调整
					this.isNoMore = this.currentPage >= this.totalPages;
					this.currentPage++;
				} else {
					this.isNoMore = true;  // 无更多数据
					if (this.currentPage === 1) this.projects = [];  // 首屏无数据
				}
			}).catch(() => {
				this.isNoMore = true;  // 错误时停止加载
			}).finally(() => {
				this.isLoading = false;
				uni.hideLoading();
			})
		},
		togglePhone(role, index) {
			this.showSalePhone.fill(false);
			this.showTechnologyPhone.fill(false);
			this.showFinancePhone.fill(false);
			this.showExecutivePhone.fill(false);
			switch (role) {
				case 'sale':
					this.showSalePhone.splice(index, 1, !this.showSalePhone[index]);
					break;
				case 'technology':
					this.showTechnologyPhone.splice(index, 1, !this.showTechnologyPhone[index]);
					break;
				case 'finance':
					this.showFinancePhone.splice(index, 1, !this.showFinancePhone[index]);
					break;
				case 'executive':
					this.showExecutivePhone.splice(index, 1, !this.showExecutivePhone[index]);
					break;
				default:
					break;
			}
		}
	}
}
</script>

<style scoped lang="scss">
.background {
	background: #f5f6f9;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

.project-box {
	padding: 20rpx;
	box-sizing: border-box;

	/* 新增分页提示样式 */
	.loading-text {
		text-align: center;
		padding: 32rpx 0;
		color: #1890ff;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&::after {
			content: '';
			display: inline-block;
			margin-left: 16rpx;
			width: 28rpx;
			height: 28rpx;
			border: 4rpx solid #1890ff;
			border-radius: 50%;
			border-top-color: transparent;
			animation: rotate 0.8s linear infinite;
		}
	}

	.no-more-text {
		text-align: center;
		padding: 48rpx 0;
		color: #999;
		font-size: 24rpx;
		position: relative;

		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			width: 100rpx;
			height: 1rpx;
			background: #eee;
		}

		&::before {
			left: 20%;
		}

		&::after {
			right: 20%;
		}
	}

	.project-list2 {
		border-radius: 16rpx;

		.project-card {
			overflow: hidden;
			margin-bottom: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			margin: 20rpx 0;

			.project-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				text {
					font-size: 32rpx;
					font-weight: bold;
				}

				.status-tag {
					border-radius: 10rpx;
					padding: 6rpx 12rpx;
					font-size: 24rpx;
					font-weight: bold;

					&.completed {
						background-color: rgba(0, 160, 105, 0.1);
						color: #00a069;
					}

					&.ongoing {
						background-color: rgba(0, 122, 255, 0.1);
						color: #007aff;
					}

					&.not-started {
						background-color: rgba(255, 58, 58, 0.1);
						color: #ff3a3a;
					}
				}
			}

			.project-detail {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: column;

				.userbox {
					position: relative;
					margin-bottom: 10rpx;
					cursor: pointer;
				}

				.phone-wrapper {
					position: absolute;
					bottom: -50rpx;
					left: 0;
					z-index: 10;
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					background: #fff;
					box-shadow: 0 2rpx 6rpx 2rpx #c1c1c1;
					padding: 3rpx 5rpx;
					box-sizing: border-box;
					border-radius: 10rpx;

					.image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}
			}

			.tab-bar {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.tab-item {
					width: 20%;
					text-align: center;
					padding: 8rpx 0;
					background-color: #e0f1ff;
					border-radius: 10rpx;
					color: #007aff;
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>